<template>
<div class="dt">
    <!-- 地图区 -->
    <div class="map_content">
        <!-- 百度地图 -->
        <baidu-map id="BDmap" class="map" :center="center" :zoom="zoom" @ready="handler" @click="cSclick">
            <MyOverlayLv :position="item.position" :icon="item.icon" :stationId="item.stationId" :areaName="item.areaName" @showBusDataLocation="busDataLocationShow" v-for="(item, key) in staLv" :key="key">
            </MyOverlayLv>
            <MyOverlayH :position="item.position" :icon="item.icon" :stationId="item.stationId" :areaName="item.areaName" @showBusDataLocation="busDataLocationShow" v-for="(item, key) in staH" :key="key">
            </MyOverlayH>
            <MyOverlayG :position="item.position" :icon="item.icon" :stationId="item.stationId" :areaName="item.areaName" @showBusDataLocation="busDataLocationShow" v-for="(item, key) in staG" :key="key">
            </MyOverlayG>
            <bm-info-window class="a_pop" :height=300 :width=400 :offset="{ width: 0,
                height: 100}" :position="stationLabel.position" :show="stationLabel.infoWindowShow" :closeOnClick=false>
                <!-- <div class="infolabel"> -->
                <!-- <div class="infocontent"> -->
                <!-- <div class="infotitle">
                                {{ stationLabel.name }}
                            </div> -->
                <!-- <div class="infotext" > -->
                <!-- <transition name="tcqh"> -->
                <div>
                    <div class="infolabel">
                        <div class="infotitle">

                            <span class="l_number">
                                {{stationLabel.length}}
                            </span>
                            {{ stationLabel.name }}
                        </div>
                        <el-carousel trigger="click" height="150px" :autoplay="true" arrow="never" ref="cardShow">
                            <el-carousel-item v-for="item,index in stationLabel.stationInfo" :key="index">

                                <div class="infocontent">

                                    <div class="infotext">
                                        <div class="info_line">
                                            <span>识别时间：</span>
                                            <span>{{ item.time }}</span>
                                        </div>
                                        <div class="info_line">
                                            <span>车牌号：</span>
                                            <span>{{ item.number }}</span>
                                        </div>
                                        <div class="info_line">
                                            <span>车主姓名：</span>
                                            <span>{{ item.driver }}</span>
                                        </div>
                                        <div class="info_line">
                                            <span>电车类型：</span>
                                            <span>{{ item.type }}</span>
                                        </div>
                                    </div>
                                </div>

                            </el-carousel-item>
                        </el-carousel>

                        <button class="cancel-label" @click="infoWindowClose">取消查看</button>
                    </div>
                </div>
                <!-- </transition> -->
                <!-- </div> -->
                <!-- </div> -->

                <span class="label-left" @click="lefttcqhLabel">
                </span>
                <span class="label-right" @click="righttcqhLabel">
                </span>
                <!-- <el-button class="cancel-label" @click="infoWindowClose">取消查看</el-button> -->
                <!-- </div> -->
            </bm-info-window>

            <bm-info-window class="b_pop" :height=300 :width=400 :offset="{ width: 0,
                height: 60}" :position="stationLabelb.position" :show="stationLabelb.infoWindowShow" :closeOnClick=false>
                <div>
                    <div class="infolabelb">
                        <div class="infotitleb">
                            <span class="l_numberb">
                                0
                            </span>
                            {{ stationLabelb.name }}
                        </div>

                        <button class="cancel-labelb" @click="infoWindowClose">取消查看</button>
                    </div>
                </div>
            </bm-info-window>
        </baidu-map>

        <!-- 区域 -->
        <div class="quyu" v-show="queryShow">
            <div class="ZTinpt">
                <span>区域</span>
                <el-cascader v-model="valueArea" :options="area"></el-cascader>
            </div>
            <div class="ZTinpt">
                <span>项目</span>
                <el-select v-model="valueProject" class="qy_xz" placeholder="请选择">
                    <el-option v-for="item in project" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="ZTinpt">
                <span>设备编号</span>
                <el-input v-model="busNumber" class="chepai" placeholder="请输入设备编号"></el-input>
            </div>
            <button @click="searchReset">重置</button>
            <button @click="searchArea">查询</button>
            <div class="sq"></div>
        </div>
        <!-- 右侧车辆详情区 -->
        <div class="right_cs" v-show="csShow">
            <span>设备编号</span>
            <div class="dev_no">{{ recordStationId}}</div>
            <span>安装位置</span>
            <div class="ins_pos">{{ recordStationArea }}</div>
            <span>周边车辆</span>
            <div class="record-list">
                <div class="record" v-for="rec,index in recordList" :key="index">
                    <div class="record_line">
                        <span>识别时间：</span>
                        <span>{{ rec.time }}</span>
                    </div>
                    <div class="record_line">
                        <span>车牌号：</span>
                        <span>{{ rec.number }}</span>
                    </div>
                    <div class="record_line">
                        <span>车主姓名：</span>
                        <span>{{ rec.driver }}</span>
                    </div>
                    <div class="record_line">
                        <span>车辆类型：</span>
                        <span>{{ rec.type }}</span>
                    </div>
                </div>

            </div>

            <button class="subActive">查看数据</button>
        </div>
    </div>

</div>
</template>

<script>
import MyOverlayLv from "./MyOverlayLv.vue";
import MyOverlayH from "./MyOverlayH.vue";
import MyOverlayG from "./MyOverlayG.vue"
import AreaDivision from "../../static/area.js";
import mapStyleJson from "../../static/json/custom_map.json"
export default {
    data() {
        return {
            center: {
                lng: 0,
                lat: 0
            },
            zoom: 3,
            points: [],
            mapStyle: {
                styleJson: mapStyleJson
            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                        text: "今天",
                        onClick(picker) {
                            picker.$emit("pick", new Date());
                        },
                    },
                    {
                        text: "昨天",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit("pick", date);
                        },
                    },
                    {
                        text: "一周前",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", date);
                        },
                    },
                ],
            },

            infoWindowShow: true,

            stationLabel: {
                name: "小区",
                position: {
                    lng: 113.947665,
                    lat: 22.533
                },
                infoWindowShow: false,
                cur: 1,
                length: 5,
                stationInfo: []
            },
            stationLabelb: {
                name: "小区",
                position: {
                    lng: 113.947665,
                    lat: 22.533
                },
                infoWindowShow: false,
            },
            recordStationId: "",
            recordStationArea: "",
            recordList: [{
                name: "理想家园小区-北门",
                time: "2022.2.13 10:09:27",
                number: "京G12345",
                driver: "张一三",
                type: "外卖车"
            }],
            stationRecord: {},
            labelTimeOut: null,
            makerClick: false,
            clickTimer: [],
            icon: "",
            currentohStationId: "",
            currentnohStationId: "",
            value1: "",
            value2: "",
            staLv: {},
            staH: {},
            staG: {},
            locationTimeInterval: "",
            polylinePath1: [],
            polylinePath2: [],
            value: "",
            options: [{
                value: 1,
                label: 1,
            }, ],
            area: AreaDivision.arrAll,
            project: [],
            valueArea: [],
            valueProject: "",
            busNumber: "",
            trajectoryShow: false,
            queryShow: true,
            detailShow: false,
            csShow: false,
            exitShow: false,

            //websocket
            wsIsRun: false, // ws是否启动
            // 定义ws对象
            webSocket: null,
            ws: '', // ws请求链接（类似于ws后台地址）
            wsTimer: null, // ws定时器
        };
    },
    created() {
        this.updateLocation();
        this.getAreaProject();
        this.wsIsRun = true;
        this.initSocket();
    },
    methods: {
        cSclick() {
            let _this = this;
            _this.csShow = false;
            for (let i = 0; i < _this.clickTimer; i++) {
                clearTimeout(_this.clickTimer[i]);
            }
            _this.clickTimer = [];
        },
        infoWindowClose() {
            let _this = this;
            _this.makerClick = false;
            clearTimeout(_this.labelTimeOut);
            this.stationLabel.infoWindowShow = false;
            this.stationLabelb.infoWindowShow = false;
        },
        infoWindowOpen() {
            this.stationLabel.infoWindowShow = true
        },
        clickHandler() {
            let right_detail = document.getElementById("right_detail");
            right_detail.style.display = "none";
        },
        lefttcqhLabel() {
            let _this = this;
            _this.$refs.cardShow.prev()
        },
        righttcqhLabel() {
            let _this = this;
            _this.$refs.cardShow.next()
        },
        handler({
            BMap,
            map
        }) {
            let _this = this;
            this.center.lng = 113.947665;
            this.center.lat = 22.53295;
            this.zoom = 17;
            map.setMapStyleV2(_this.mapStyle)
        },
        busDataLocationShow(stationId, position, areaName) {
            let _this = this;
            // _this.csShow = true;
            // _this.stationLabel.infoWindowShow = true
            _this.recordStationId = stationId;
            _this.recordStationArea = areaName;
            _this.$axios.post("moto/getRecordOnLineList", {
                    stationId: stationId
                })
                .then(res => {
                    let data = res.data.data;
                    _this.csShow = true;
                    clearTimeout(_this.labelTimeOut);
                    _this.makerClick = true;
                    _this.recordList = [];
                    if (data.length > 0) {
                        let position = {
                            lng: data[0].coordX,
                            lat: data[0].coordY
                        };
                        let recordInfo = [];
                        for (let i = 0; i < data.length; i++) {
                            _this.recordList.push({
                                time: data[i].recordTime,
                                number: data[i].number,
                                driver: data[i].hostName,
                                type: data[i].type
                            });
                            recordInfo.push({
                                time: data[i].recordTime,
                                number: data[i].number,
                                driver: data[i].hostName,
                                type: data[i].type
                            });
                        }
                        // recordInfo.splice(-5);
                        _this.stationLabel = {
                            name: _this.recordStationArea,
                            position: position,
                            infoWindowShow: true,
                            length: _this.recordList.length,
                            stationInfo: recordInfo
                        };
                    } else {
                        _this.stationLabel.infoWindowShow = false;
                        _this.recordList.push({
                            name: "————",
                            time: "————",
                            number: "————",
                            driver: "————",
                            type: "————"
                        })
                        _this.stationLabelb = {
                            name: areaName,
                            position: position,
                            infoWindowShow: true
                        }
                    }
                    let timer = setTimeout(() => {
                        _this.busDataLocationShow(stationId, position, areaName)
                    }, 5000);
                    _this.clickTimer.push(timer);

                })
                .catch(e => {
                    _this.recordStationArea = "";
                    _this.recordList.push({
                        name: "————",
                        time: "————",
                        number: "————",
                        driver: "————",
                        type: "————"
                    })
                    console.log(e);
                })
        },

        updateLocation() {
            this.showLocation();
            setInterval(this.showLocation, 5000);
        },
        showLocation() {
            let _this = this;
            _this.$axios({
                method: "get",
                url: "moto/getStationByTime",
            }).then((res) => {
                let data = res.data.data;
                let green = data.green;
                let yellow = data.yellow;
                let grey = data.grey;
                _this.staLv = {};
                for (let i = 0; i < green.length; i++) {
                    var icon = "";

                    icon = {
                        url: "../../static/img/stalv1.png",
                        size: {
                            width: 27,
                            height: 35
                        },
                        opts: {
                            anchor: {
                                width: 35,
                                height: -15
                            },
                        }
                    };

                    let wgs84togcj02 = _this.coordtransform.wgs84togcj02(
                        green[i].coordX,
                        green[i].coordY
                    );
                    let gcj02tobd09 = _this.coordtransform.gcj02tobd09(
                        wgs84togcj02[0],
                        wgs84togcj02[1]
                    );
                    _this.staLv[green[i].stationId] = {
                        stationId: green[i].stationId,
                        icon: icon,
                        areaName: green[i].position,
                        position: {
                            lng: green[i].coordX,
                            lat: green[i].coordY
                        },
                    };
                }
                _this.staH = {};
                for (let i = 0; i < yellow.length; i++) {
                    var icon = "";

                    icon = {
                        url: "../../static/img/stah1.png",
                        size: {
                            width: 27,
                            height: 35
                        },
                        opts: {
                            anchor: {
                                width: 35,
                                height: -15
                            },
                        }
                    };
                    let wgs84togcj02 = _this.coordtransform.wgs84togcj02(
                        yellow[i].coordX,
                        yellow[i].coordY
                    );
                    let gcj02tobd09 = _this.coordtransform.gcj02tobd09(
                        wgs84togcj02[0],
                        wgs84togcj02[1]
                    );
                    _this.staH[yellow[i].stationId] = {
                        stationId: yellow[i].stationId,
                        icon: icon,
                        areaName: yellow[i].position,
                        position: {
                            lng: yellow[i].coordX,
                            lat: yellow[i].coordY
                        },
                    };
                }
                _this.staG = {};
                for (let i = 0; i < grey.length; i++) {
                    var icon = "";

                    icon = {
                        url: "../../static/img/stag1.png",
                        size: {
                            width: 27,
                            height: 35
                        },
                        opts: {
                            anchor: {
                                width: 35,
                                height: -15
                            },
                        }
                    };
                    let wgs84togcj02 = _this.coordtransform.wgs84togcj02(
                        grey[i].coordX,
                        grey[i].coordY
                    );
                    let gcj02tobd09 = _this.coordtransform.gcj02tobd09(
                        wgs84togcj02[0],
                        wgs84togcj02[1]
                    );
                    _this.staG[grey[i].stationId] = {
                        stationId: grey[i].stationId,
                        icon: icon,
                        areaName: grey[i].position,
                        position: {
                            lng: grey[i].coordX,
                            lat: grey[i].coordY
                        },
                    };
                }
            });
        },
        updateLabel(record) {
            let _this = this;
            _this.showLocation();
            let recordInfo = [];
            if (typeof record != 'undefined' && record != null && record.length > 0 && !_this.makerClick) {
                clearTimeout(_this.labelTimeOut);

                for (let i = 0; i < record.length; i++) {
                    let r = record[i];
                    let time = r.recordTime;
                    let number = r.number;
                    let driver = r.hostName;
                    let type = r.type;
                    recordInfo.push({
                        time: time,
                        number: number,
                        driver: driver,
                        type: type
                    });
                }
                // recordInfo.splice(-5);
                let stationId = record[0].stationId;
                let position = {
                    lng: record[0].coordX,
                    lat: record[0].coordY
                };
                let area = record[0].position;
                _this.stationLabel = {
                    name: area,
                    position: position,
                    infoWindowShow: true,
                    length: recordInfo.length,
                    stationInfo: recordInfo
                };
                _this.labelTimeOut = setTimeout(_this.infoWindowClose, 10000);
            } else if (typeof record != 'undefined' && record != null && record.length > 0 && _this.makerClick &&
                typeof record[0].stationId != 'undefined' && record[0].stationId == _this.recordStationId) {
                _this.recordList = [];

                let area = record[0].position;
                let stationId = record[0].stationId;
                let position = {
                    lng: record[0].coordX,
                    lat: record[0].coordY
                };
                // for (let i = 0; i < record.length; i++) {
                //     let r = record[i];
                //     let time = r.recordTime;
                //     let number = r.number;
                //     let driver = r.hostName;
                //     let type = r.type;
                //     _this.recordList.push({
                //         time: time,
                //         number: number,
                //         driver: driver,
                //         type: type
                //     });
                //     recordInfo.push({
                //         time: time,
                //         number: number,
                //         driver: driver,
                //         type: type
                //     });
                // }
                // let position = {
                //     lng: record[0].coordX,
                //     lat: record[0].coordY
                // };
                // let area = record[0].position;
                // _this.stationLabel = {
                //     name: area,
                //     position: position,
                //     infoWindowShow: true,
                //     length: recordInfo.length,
                //     stationInfo: recordInfo
                // };
                // clearTimeout(_this.labelTimeOut);
                for (let i = 0; i < _this.clickTimer; i++) {
                    clearTimeout(_this.clickTimer[i]);
                }
                _this.clickTimer = [];
                _this.busDataLocationShow(stationId, position, area);
            }
        },

        getAreaProject() {
            let _this = this;
            _this.$axios
                .get("/project/getAll")
                .then((res) => {
                    res.data.data.forEach((pro) => {
                        _this.project.push({
                            value: pro.pid,
                            label: pro.proName,
                        });
                    });
                })
                .catch();
        },
        searchReset() {
            let _this = this;
            _this.csShow = false;
            _this.valueArea = [];
            _this.valueProject = "";
            _this.busNumber = "";
            _this.items = {};
            this.locationTimeInterval = setInterval(this.showLocation(), 10000);
        },
        searchArea() {
            let _this = this;
            let proId = _this.valueProject;
            let regionCode =
                _this.valueArea.length == 0 ?
                "" :
                _this.valueArea[_this.valueArea.length - 1];
            let busNumber = _this.busNumber;
            clearInterval(_this.locationTimeInterval);

            setTimeout(() => {
                _this.pointsShow(proId, regionCode, busNumber);
                _this.locationTimeInterval = setInterval(() => {
                    _this.pointsShow(proId, regionCode, busNumber);
                }, 10000);
            }, 0);
        },
        // 展示点位
        pointsShow(proId, regionCode, busNumber) {
            let _this = this;
            _this.$axios
                .get(
                    "location/selectPosition?proId=" +
                    proId +
                    "&regionCode=" +
                    regionCode +
                    "&busNumber=" +
                    busNumber
                )
                .then((res) => {
                    let position = res.data.data;
                    if (position.length == 0) {
                        _this.$message.error("无录入设备定位信息");
                        clearInterval(_this.locationTimeInterval);
                    } else {
                        _this.items = {};
                        for (let i = 0; i < position.length; i++) {
                            var icon = "";
                            if (position[i].deviceId != _this.currentDeviceId) {
                                icon = {
                                    url: "../../static/img/lvlocation.png",
                                    size: {
                                        width: 27,
                                        height: 35
                                    },
                                    opts: {
                                        anchor: {
                                            width: 35,
                                            height: -15
                                        },
                                    },
                                };
                            } else {
                                icon = {
                                    url: "../../static/img/lvclicklocation.png",
                                    size: {
                                        width: 32,
                                        height: 42
                                    },
                                    opts: {
                                        anchor: {
                                            width: 40,
                                            height: -11.5
                                        },
                                    },
                                };
                            }
                            let wgs84togcj02 = _this.coordtransform.wgs84togcj02(
                                position[i].flongitude,
                                position[i].flatitude
                            );
                            let gcj02tobd09 = _this.coordtransform.gcj02tobd09(
                                wgs84togcj02[0],
                                wgs84togcj02[1]
                            );
                            _this.items[position[i].deviceId] = {
                                deviceId: position[i].deviceId,
                                icon: icon,
                                position: {
                                    lng: gcj02tobd09[0],
                                    lat: gcj02tobd09[1]
                                },
                            };
                        }
                    }
                })
                .catch((e) => {
                    console.log(e);
                });
        },
        initSocket() {
            // const wsuri = 'ws://localhost:8002/websocket/abc';
            const wsuri = 'ws://124.71.24.222:8002/websocket/abc';
            this.ws = wsuri;
            if (!this.wsIsRun) return;
            // 销毁ws
            this.wsDestroy();
            // 初始化ws
            this.webSocket = new WebSocket(this.ws);
            // ws连接建立时触发
            this.webSocket.addEventListener('open', this.wsOpenHanler);
            // ws服务端给客户端推送消息
            this.webSocket.addEventListener('message', this.wsMessageHanler);
            // ws通信发生错误时触发
            this.webSocket.addEventListener('error', this.wsErrorHanler);
            // ws关闭时触发
            this.webSocket.addEventListener('close', this.wsCloseHanler);

            // 检查ws连接状态,readyState值为0表示尚未连接，1表示建立连接，2正在关闭连接，3已经关闭或无法打开
            clearInterval(this.wsTimer);
            this.wsTimer = setInterval(() => {
                if (this.webSocket.readyState === 1) {
                    clearInterval(this.wsTimer);
                } else {
                    console.log('ws建立连接失败');
                    this.initSocket();
                }
            }, 3000)

        },
        wsOpenHanler(event) {
            console.log('ws建立连接成功')
        },
        wsMessageHanler(event) {
            let _this = this;
            let data = JSON.parse(event.data);
            _this.updateLabel(data);
        },

        wsErrorHanler(event) {
            console.log(event, '通信发生错误')
            this.initSocket()
        },
        wsCloseHanler(event) {
            console.log(event, 'ws关闭')
            this.initSocket()
        },
        wsDestroy() {
            if (this.webSocket !== null) {
                this.webSocket.removeEventListener('open', this.wsOpenHanler)
                this.webSocket.removeEventListener('message', this.wsMessageHanler)
                this.webSocket.removeEventListener('error', this.wsErrorHanler)
                this.webSocket.removeEventListener('close', this.wsCloseHanler)
                this.webSocket.close()
                this.webSocket = null
                clearInterval(this.wsTimer)
            }
        },
        StringIsNull(str) {
            return typeof str != "undefined" || str != null ? str : "暂无设备信息";
        },
    },
    components: {
        MyOverlayLv,
        MyOverlayH,
        MyOverlayG,
    },
    beforeDestroy() {
        this.wsDestroy();
    }
    // activated() {
    //   this.updateLocation();
    // },
};
</script>

<style scoped>
@import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");

/deep/ .el-carousel__container {
    height: 450px !important;
}

.tcqh-enter-active,
.tcqh-leave-active {
    transition: all 0.5s linear;
    transform: translateX(0);
}

.tcqh-enter,
.tcqh-leave {
    transform: translateX(-100%);
}

.tcqh-leave-to {
    transform: translateX(-100%);
}

/* /deep/ .BMap_pop {
    transition: all 1s ease-in-out;
} */
/deep/ .BMap_pop div {
    /* display: none  ; */
    background-color: rgba(0, 0, 0, 0) !important;
    border: none !important;
}

/deep/ .BMap_pop div img {
    display: none !important;

}

/deep/ .BMap_shadow div img {
    display: none !important;
}

/deep/ .BMap_pop img {
    display: none !important;

}

/deep/ .BMap_bubble_content .a_pop {
    display: block !important;
    background: url("../../static/img/infolabel.png") no-repeat !important;
}

/deep/ .BMap_bubble_content .b_pop {
    display: block !important;
    background: url("../../static/img/infolabelb.png") no-repeat !important;
}

/deep/ .el-carousel__arrow {
    display: block !important;
}

/deep/ .el-carousel__indicators {
    transform: unset;
    position: absolute;
    /* height: 36px; */
    top: 120px;
    left: unset;
    right: 5%;
}

/deep/ .el-carousel__button {
    width: 10px;
    height: 10px;
    border: none;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
}

/deep/ .is-active .el-carousel__button {
    background: #FE921E;
}

.infolabel {
    height: 242px;
    width: 342px;
    padding: 36px 35px 26px 35px;

}

.infotitle {
    height: 26px;
    position: relative;
    background: url("../../static/img/infotitle.png") no-repeat;
    color: #FE921E;
    font-size: 16px;
    text-align: center;
    margin-bottom: 8px;
    line-height: 26px;
}

.l_number {
    position: absolute;
    left: 43px;
    height: 26px;
    width: 48px;
    background: url("../../static/img/leida.png") no-repeat;
    background-position: -3px -2px;
    background-size: 56px 32px;
    color: white;
    font-size: 17px;
}

.infocontent {
    width: 317px;
    font-family: "PingFang SC";
}

.info_line {
    height: 24px;
    position: relative;
    background: url("../../static/img/label-line.png") no-repeat;
    margin-top: 4px;
    /* top: 4px; */
    font-size: 14px;
    color: #2A354E;
    line-height: 24px;
    text-align: center;
}

.info_line>span:nth-child(1) {
    position: absolute;
    left: 8px;
}

.info_line>span:nth-child(2) {
    position: absolute;
    right: 8px;
}

.cancel-label {
    position: absolute;
    left: 136px;
    bottom: 77px;
    /* bottom: 24px; */
    width: 120px;
    height: 32px;
    /* line-height: 32px; */
    color: white;
    background-color: #FE921E;
    border-width: 0px;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0px 0px 6px 1px rgba(254, 146, 30, 0.2);
    padding: 0px !important;
    z-index: 999;
}

.label-left {
    position: absolute;
    top: 95px;
    left: 13px;
    width: 20px;
    height: 20px;
    background: url("../../static/img/label-left.png");
    cursor: pointer;
    z-index: 99999;
}

.label-right {
    position: absolute;
    top: 95px;
    right: 25px;
    width: 20px;
    height: 20px;
    background: url("../../static/img/label-right.png");
    cursor: pointer;
    z-index: 999;
}

.infolabelb {
    height: 242px;
    width: 342px;
    padding: 36px 35px 26px 35px;

}

.infotitleb {
    height: 26px;
    position: relative;
    background: url("../../static/img/infotitleb.png") no-repeat;
    color: #3C74E3;
    font-size: 16px;
    text-align: center;
    margin-bottom: 8px;
    line-height: 26px;
}

.l_numberb {
    position: absolute;
    left: 43px;
    height: 26px;
    width: 48px;
    background: url("../../static/img/leidab.png") no-repeat;
    background-position: -3px -2px;
    background-size: 56px 32px;
    color: white;
    font-size: 17px;
}

.cancel-labelb {
    position: absolute;
    left: 136px;
    bottom: 47px;
    /* bottom: 24px; */
    width: 120px;
    height: 32px;
    /* line-height: 32px; */
    color: white;
    background-color: #3C74E3;
    border-radius: 4px 4px 4px 4px;
    border-width: 0px;
    box-shadow: 0px 0px 6px 1px rgba(60, 116, 227, 0.2);
    padding: 0px !important;
    z-index: 999;
}

/* /deep/ .el-carousel__arrow--left{
    cursor: pointer;
    position: absolute;
    top: 95px;
    left: 13px;
    width: 20px;
    height: 20px;
    background: url("../../static/img/label-left.png");
    z-index: 999;
}
/deep/ .el-carousel__arrow--right{
    position: absolute;
    top: 95px;
    right: 25px;
    width: 20px;
    height: 20px;
    background: url("../../static/img/label-right.png");
    cursor: pointer;
    z-index: 999;
} */

/* 地图区 */
/* #BDmap >>> .BMap_noprint {
  display: none;
} */
button {
    cursor: pointer;
}

#BDmap>>>.anchorBL {
    display: none;
}

/* 底部详情区 */
.bottom_xingshi>div {
    display: inline-block;
    width: 48%;
    line-height: 40px;
    text-align: right;
    box-sizing: border-box;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
}

.bottom_xingshi>div:nth-of-type(1) {
    padding-right: 14px;
    background: url(../../static/img/line_B.png) no-repeat;
    background-size: 34px 4px;
    background-position: 30px 18px;
}

.bottom_xingshi>div:nth-of-type(2) {
    padding-right: 36px;
    background: url(../../static/img/line_G.png) no-repeat;
    background-size: 34px 4px;
    background-position: 5px 18px;
}

.bottom_xingshi {
    width: 280px;
    height: 40px;
    background: #ffffff;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.16);
    border-radius: 8px;
    position: absolute;
    left: 50%;
    bottom: 56px;
    transform: translateX(-50%);
}

.bottom_tuichu {
    width: 280px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: #ffffff;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    background: #3c74e3;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.16);
    border-radius: 8px;
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    cursor: pointer;
}

/* 右侧车辆详情区 */
.right_detail>button {
    width: 96px;
    height: 32px;
    background: #ffffff;
    border: 1px solid #3c74e3;
    border-radius: 4px;
    margin: 10px -4px 0 8px;
    color: #3c74e3;
}

.right_detail>span:nth-of-type(1) {
    background: url(../../static/img/JSY.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
}

.right_detail>span:nth-of-type(2) {
    background: url(../../static/img/lou.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
}

.right_detail>span:nth-of-type(3) {
    background: url(../../static/img/dengji.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
}

.right_detail>span:nth-of-type(4) {
    background: url(../../static/img/luxian.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
}

.right_detail>span:nth-of-type(5) {
    background: url(../../static/img/lanya.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
}

.right_detail>span:nth-of-type(6) {
    background: url(../../static/img/renlian.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
}

.right_detail>span:nth-of-type(7) {
    background: url(../../static/img/yujing.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
}

.right_detail>span:nth-of-type(8) {
    background: url(../../static/img/WIFI.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
}

.right_detail>span:nth-of-type(9) {
    background: url(../../static/img/dingwei.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
}

.right_detail>span:nth-of-type(10) {
    background: url(../../static/img/baojing.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
}

.right_detail>span {
    width: 100px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 0px;
    color: #666666;
    padding-left: 32px;
}

/* 右侧出事公交车 */
.right_cs {
    width: 240px;
    height: 700px;
    background: #ffffff;
    border-radius: 4px;
    position: absolute;
    top: 9px;
    right: 8px;
}

.right_cs>button {
    width: 220px;
    height: 36px;
    position: absolute;
    bottom: 15px;
    background: #3c74e3;
    border: 1px solid #3c74e3;
    border-radius: 4px;
    margin: 10px -4px 0 8px;
    color: #ffffff;
}

.right_cs>span:nth-of-type(1) {
    background: url(../../static/img/deviceNo.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
}

.right_cs>span:nth-of-type(2) {
    background: url(../../static/img/inspos.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
}

.right_cs>span:nth-of-type(3) {
    background: url(../../static/img/record.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
}

.right_cs>span {
    width: 100px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 0px;
    color: #666666;
    padding-left: 32px;
}

.dev_no,
.ins_pos {
    width: 220px;
    height: 31px;
    background: #f8f8f8;
    border-radius: 4px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 31px;
    text-align: center;
    color: #323232;
    margin: 8px auto;
    box-shadow: 0px 0px 4px -1px #888888;
}

.record-list {
    height: 480px;
    overflow-y: scroll;
}

.record-list::-webkit-scrollbar {
    display: none;
}

.record {
    height: 108px;
    width: 220px;
    background: #f8f8f8;
    border-radius: 4px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 31px;
    text-align: center;
    color: #323232;
    margin: 8px auto;
    box-shadow: 0px 0px 4px -1px #888888;
}

.record_line {
    height: 24px;
    position: relative;
    margin-top: 4px;
    /* top: 4px; */
    font-size: 14px;
    /* font-weight: 400; */
    color: #2A354E;
    line-height: 24px;
    text-align: center;
}

.record_line>span:nth-child(1) {
    position: absolute;
    left: 5px;
}

.record_line>span:nth-child(2) {
    position: absolute;
    right: 6px;
}

.right_cs>div:nth-of-type(1) {
    margin-bottom: 16px;
}

/* 查看轨迹 */
.right_detail {
    width: 216px;
    height: 760px;
    background: #ffffff;
    border-radius: 4px;
    position: absolute;
    top: 9px;
    right: 8px;
}

.CKGJ>button:nth-of-type(2) {
    color: #fff;
    background: url(../../static/img/serch.png) no-repeat #3c74e3;
    background-size: 15px 15px;
    background-position: 14px 10px;
}

.CKGJ>button:nth-of-type(1) {
    background: url(../../static/img/sx.png) no-repeat #fff;
    background-size: 15px 15px;
    background-position: 14px 10px;
}

.CKGJ>button {
    float: right;
    width: 80px;
    height: 36px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    margin: 12px 8px;
    padding-left: 26px;
    box-sizing: border-box;
    font-size: 14px;
}

.CKGJ>span:nth-of-type(2) {
    position: absolute;
    left: 254px;
}

.el-input>>>.el-input__prefix {
    right: -90px !important;
}

.el-input>>>.el-input__inner {
    width: 180px;
    height: 36px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    padding-left: 8px;
}

.el-input:nth-of-type(1) {
    position: absolute;
    top: 12px;
    left: 292px;
}

.el-input:nth-of-type(2) {
    position: absolute;
    top: 11px;
    left: 82px;
}

.CKGJ>span {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 60px;
    color: #666666;
    padding-left: 16px;
}

.CKGJ {
    width: 678px;
    height: 60px;
    background: #ffffff;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.16);
    border-radius: 4px;
    position: absolute;
    left: 16px;
    top: 8px;
}

.map_content {
    width: 100%;
    height: calc(100% - 2px);
    position: relative;
}

.dt {
    width: 100%;
    height: calc(100% - 44px);
}

.map {
    position: absolute;
    top: 0%;
    width: 100%;
    height: 100%;
}

.anchorBL {
    display: none;
}

/* 区域 */
.quyu {
    width: 216px;
    height: 364px;
    background-color: #ffffff;
    position: absolute;
    top: 8px;
    left: 16px;
    border-radius: 4px;
}

.ZTinpt>span {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 32px;
    color: rgba(0, 0, 0, 0.6);
    padding-top: 16px;
}

.ZTinpt {
    padding-left: 8px;
    padding-top: 13px;
}

/* .el-select >>> .el-input__inner,
.el-input >>> .el-input__inner {
  width: 200px;
  height: 36px;
  border: 1px solid #dddddd;
  border-radius: 4px;
  padding-left: 8px;
  box-sizing: border-box;
} */
.chepai>>>.el-input__inner {
    width: 200px;
    height: 36px;
    margin-left: -285px;
    margin-top: 200px;
}

.qy_xz>>>.el-input__inner {
    width: 200px;
    height: 36px;
}

.quyu button:nth-of-type(2) {
    color: #fff;
    background: url(../../static/img/serch.png) no-repeat #3c74e3;
    background-size: 15px 15px;
    background-position: 74px 10px;
    margin: 4px 8px 4px 8px;
}

.quyu button:nth-of-type(1) {
    background: url(../../static/img/sx.png) no-repeat #fff;
    background-size: 15px 15px;
    background-position: 74px 10px;
    margin: 54px 8px 4px 8px;
}

.quyu button {
    float: right;
    width: 200px;
    height: 36px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    padding-left: 26px;
    box-sizing: border-box;
    font-size: 14px;
    font-family: PingFang SC;
    color: rgba(0, 0, 0, 0.6);
}

.sq {
    background: url(../../static/img/sq.png) no-repeat;
    width: 14px;
    height: 12px;
    background-size: 14px 12px;
    margin-left: 101px;
    margin-top: 140px;
}
</style>
